import 'intro.js/introjs.css'
import './index.css' // 自定义样式文件

import { useEffect, useState } from 'react'

import { Steps } from 'intro.js-react'

const HomeIntro = (props) => {
  const changeFlag = props.changeFlag
  const [flag, setFlag] = useState(false)
  const steps = [
    {
      element: '#menu',
      intro: '1.切换菜单',
      position: 'auto'
    },
    {
      element: '#collapsedbtn',
      intro: '2.菜单栏折叠',
      position: 'auto'
    },
    {
      element: '.sunmoonbtn',
      intro: '3.主题切换',
      position: 'auto'
    },
    {
      element: '#languagebtn',
      intro: '4.语言切换',
      position: 'left'
    }
  ]

  useEffect(() => {
    setFlag(true)
  }, [])

  return (
    <>
      <Steps
        enabled={true} // 启用步骤引导
        steps={steps} // 步骤数组
        initialStep={0} // 初始步骤索引
        onExit={(e) => {
          if (e == steps.length - 1) {
            changeFlag(false)
            localStorage.setItem('showIntro', 'false')
          }
        }} // 引导结束时的回调函数
        onComplete={() => {
          changeFlag(false)
          localStorage.setItem('showIntro', 'false')
        }}
        onBeforeExit={() => {
          if (flag) {
            changeFlag(false)
            localStorage.setItem('showIntro', 'false')
          }
        }}
        options={{
          showProgress: false, // 显示进度条
          showBullets: true, // 不显示步骤圆点
          exitOnEsc: true, // 按下 ESC 键退出引导
          exitOnOverlayClick: false, // 点击背景不退出引导
          tooltipPosition: 'auto', // 工具提示位置自动调整
          disableInteraction: false, // 禁用元素交互,
          nextLabel: '下一步',
          prevLabel: '上一步',
          doneLabel: '完成',
          skipLabel: '跳过'
        }}
      />
    </>
  )
}

export default HomeIntro
